<!---总览数据页面-->
<template>
  <div class="ele-body ele-body-card">
    <a-row>
      <a-col :span="12" class="block-space-right">
        <a-card title="设备信息" class="card-width">
          <a-descriptions bordered :column="1">
            <a-descriptions-item label="牛号">{{ data.cattleNo }}</a-descriptions-item>
            <a-descriptions-item label="耳标号1">{{ data.earOne }}</a-descriptions-item>
            <a-descriptions-item label="耳标号2">{{ data.earTwo }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="12" class="block-space-right">
        <!-- 右边统计快 -->
        <a-card title="实时数据" class="card-width">
          <a-row :gutter="8">
            <a-col :span="8">
              <a-card>
                <a-statistic
                  title="爬跨状态"
                  :value="cattleData.estrusing"
                  :precision="0"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-statistic
                  title="心跳速率(次/min)"
                  :value="cattleData.heartRate"
                  :precision="0"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card>
                <a-statistic
                  title="速率状态"
                  :value="cattleData.rateStateText"
                  :precision="0"
                  suffix=""
                  class="demo-class"
                  :value-style="{ color: '#cf1322' }"
                />
              </a-card>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import {CattleRealtimeDataApi} from '@/api/property/cattlemanager/CattleRealtimeDataApi';


export default {
  name: 'CattleManagerCattleEstrusMonitor',
  components: {

  },
  props: {
    data: Object
  },
  data() {
    return {
      cattleData: {},
      loadDetailTimer: null,
    };
  },
  mounted() {
    this.getDetail();
    this.loadDetailTimer = setInterval(this.getDetail, 30000);
  },
  beforeUnmount() {
    clearInterval(this.loadDetailTimer);
  },
  methods: {
    getDetail() {
      let that = this;
      CattleRealtimeDataApi.detail({"cattleId": this.data.cattleId}).then(result => {
        that.cattleData = result || {};
        if (that.cattleData.estrusing == 1) {
          that.cattleData.estrusing = "正在爬跨状态";
        } else {
          that.cattleData.estrusing = "非爬跨状态";
        }

        if (that.cattleData.rateState == 0) {
          that.cattleData.rateStateText = "无目标";
        } else if (that.cattleData.rateState == 1) {
          that.cattleData.rateStateText = "信号微弱";
        } else if (that.cattleData.rateState == 2) {
          that.cattleData.rateStateText = "呼吸正常";
        } else if (that.cattleData.rateState == 3) {
          that.cattleData.rateStateText = "异常移动";
        }
      });
    },


  }
};
</script>
<style scoped>
.block-space-top {
  /*上右下左*/
  padding: 10px 0 0 0;
}

.block-space-right {
  padding: 0 5px 0 0;
}

.block-space-left {
  padding: 0 0 0 5px;
}

.card-width {
  width: 100%;
}

@media screen and (max-width: 880px) {
  .analysis-tabs-extra {
    display: none;
  }
}
</style>
